import React from 'react';
import {inject, observer} from 'mobx-react';
import { toJS } from 'mobx';
import { WeaDialog,WeaInputSearch,WeaTransfer,WeaLocaleProvider } from 'ecCom';
import { Button ,Spin} from 'antd';
const getLabel = WeaLocaleProvider.getLabel;



@inject('standardCustomReportStore')
@observer
class ColsetDialog extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        unchooseFilterValue: "",
        chooseFilterValue: ""
      };
    }
    componentDidMount() {
      const { standardCustomReportStore, location = {}} = this.props;
      const { getColSetData } = standardCustomReportStore;
      const { query = {} } = location;
      const { reportid } = query;
      const method = 1;
      getColSetData(reportid, method);
  }
    render() {
      const { loading,standardCustomReportStore } = this.props;
      const { colSetVisible,colSetdatas ,colSetKeys} = standardCustomReportStore;
      let { chooseFilterValue, unchooseFilterValue } = this.state;
      return (
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ix9wjh`}
          visible={colSetVisible}
          icon="icon-coms-currency"
          iconBgcolor="#0079DE"
          title={getLabel("32535", "显示列定制")}
          style={{ width: 720, height: 500 }}
          onCancel={this.closeCustomCol}
          hasScroll={true}
          buttons={[
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tiikpj@save`} type="primary" onClick={this.saveColumnsSet}>
              {getLabel("30986", "保存")}
            </Button>,
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@u80ww3@columnsReset`} type="primary" onClick={this.saveColumnsReset}>
              {getLabel("510669", "恢复默认显示列")}
            </Button>,
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wg9901@cancel`} type="ghost" onClick={this.closeCustomCol}>
              {getLabel("31129", "取消")}
            </Button>
          ]}
        >
    
            <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@r0hlto`}
              className="wea-table-colset"
              data={ toJS(colSetdatas) }
              selectedKeys={ toJS(colSetKeys)}
              leftHeader={this.getHeader("unchooseFilterValue")}
              rightHeader={this.getHeader("chooseFilterValue")}
              filterLeft={this.filterLeft.bind(this, unchooseFilterValue)}
              filterRight={this.filterRight.bind(this, chooseFilterValue)}
              renderItem={item => (
                <div className="wea-new-table-transfer-item">{item.name}</div>
              )}
              onChange={this.onChange}
            />
       
        </WeaDialog>
      );
    }
  
    getHeader = key => {
      let setKey = v => {
        let newState = {};
        newState[key] = v;
        this.setState(newState);
      };
      return (
        <div className="wea-new-table-transfer-header">
          <div className="header-content">
            {key == "unchooseFilterValue"
              ? getLabel("385971", "待选列名")
              : getLabel("385972", "已选列名")}
            <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@mz2gw7`}
              style={{ width: 100, float: "right", margin: "5px 10px 5px 0px" }}
              value={this.state[key]}
              onSearchChange={setKey}
            />
          </div>
        </div>
      );
    };
  
    filterLeft = (filterValue,datas) => {
      if (!filterValue || !filterValue.trim()) return datas;
      filterValue = filterValue.trim();
      return datas&&datas.filter(data => {
        return data.name.indexOf(filterValue) >= 0;
      });
    };

    filterRight = (filterValue,datas) => {
      if (!filterValue || !filterValue.trim()) return datas;
      filterValue = filterValue.trim();
      return datas&&datas.filter(data => {
        return data.name.indexOf(filterValue) >= 0;
      });
    };
    onChange = (datas) =>{
      const { standardCustomReportStore } =this.props;
      const { setSystemIds }=standardCustomReportStore;
      setSystemIds(datas);   
    }
    saveColumnsSet = () =>{
      const { standardCustomReportStore ,location = {}} =this.props;
      const { saveColumnsSet }=standardCustomReportStore;
      const { query = {} } = location;
      const { reportid } = query;
      const method = 0;
      saveColumnsSet(reportid, method);
    }

    saveColumnsReset = () =>{
      const { standardCustomReportStore ,location = {}} =this.props;
      const { saveColumnsReset }=standardCustomReportStore;
      const { query = {} } = location;
      const { reportid } = query;
      const method = 0;
      const redefault = 1;
      saveColumnsReset(reportid, method,redefault);
    }
    

    closeCustomCol = () => {
      const { standardCustomReportStore } =this.props;
      const { setColSetVisible }=standardCustomReportStore;
      setColSetVisible(false);
      this.setState({
        unchooseFilterValue: "",
        chooseFilterValue: ""
      });
    };
  }
  
  export default ColsetDialog;